import React, { useState } from "react";
import Question from './Question'
import { Pagination,Spin } from 'antd';

import 'antd/dist/reset.css';

export default function PaggingQuestion(props) {
    const { questions } = props
    const [pageSize, setPageSize] = useState(10)
    const [current, setCurrent] = useState(0)
    const [loadingFlag, setLoadingFlag] = useState(false)
    const {questionList} = questions;
    const onShowSizeChange = (c,p) =>{
      setLoadingFlag(true)
      setCurrent(c - 1)
      setPageSize(p)
      setTimeout(() => setLoadingFlag(false), 2000 )
    }
    const onCurrentChange = c =>{
      setLoadingFlag(true)
      setCurrent(c - 1)
      setTimeout(() => setLoadingFlag(false), 2000 )
    }
    return (
      <div>
          <Spin spinning={loadingFlag}>
              {questionList.map((item,index)=>(
                <div key={index} style={{ display: (index + 1 - (pageSize * current) > 0) && (index + 1 - (pageSize * current) <= pageSize)?'block':'none'}}>
                  <Question bookmarkable={false} index={index} {...item}/>
                </div> 
              ))}
              <Pagination defaultCurrent={1} total={questionList.length} onChange={onCurrentChange} onShowSizeChange={onShowSizeChange}/>
          </Spin>
      </div>
    )
}
